<template>
  <div class="index">
    <div class="index_header">
      <div class="index_header_cont w1200">
        <div class="user_info_cont">
          <div class="user_img_bg">
            <div class="user_img_cont">
              <img class="user_img" :src="studentInfo.head_img" alt="">
            </div>
          </div>
          <div class="user_info">
            <div class="user_name">
              {{studentInfo.student_name}}
              <i v-if="studentInfo.sex === 1" class="icon icon_boy"></i>
              <i v-else class="icon icon_girl"></i>
            </div>
            <div class="user_number">学号<span>{{studentInfo.school_number}}</span></div>
          </div>
        </div>
        <div class="other_info_cont">
          <div class="school_info">
            <div class="user_level">{{studentInfo.grade}}&nbsp;级</div>
            <div class="user_major">
              {{studentInfo.major_detail.major_name}}-{{studentInfo.major_detail.layer === 1?'专':'本'}}
            </div>
          </div>
          <div class="see_btn">
            <el-button @click="goPageGrade" round size="small">查看成绩</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="index_main w1200">
      <div class="index_title">
        <i class="title_bar"></i>
        <span class="title_txt">第{{stage | num2Cn}}学期</span>
        <span class="title_number">我的学科 ( {{courseList.length}}门 )</span>
      </div>
      <div class="course_list">
        <course-card
          v-for="(item, index) in courseList"
          class="course_item"
          :course-info="item"
          :isStudy="isStudy"
          :key="index"></course-card>
        <!--补位元素-->
        <div class="course_item"></div>
        <div class="course_item"></div>
        <div class="course_item"></div>
        <div class="course_item"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 首页默认加载第一学期的卡片列表
// 点击导航条上的学科课程，弹出下拉框，选择学期后首页列表加载对应学期的卡片列表
// 点击查看成绩进入成绩页
// 点击卡片进入课表
// 4.所有的课程都是视频课程，直播功能不做，只是效果图上有，不管

// 课程卡片
import CourseCard from './comp/CourseCard'

export default {
  name: 'Index',
  data () {
    return {
      courseList: [], // 学科列表
      isStudy: -1, // 是否开课，-1表示未开课
    }
  },
  computed: {
    // 学员基本信息
    studentInfo () {
      return this.$store.state.studentInfo || {}
    },
    stage () { // 当前学期
      return Number(this.$route.query.stage) || this.$store.state.studentInfo.student_study_stage || 1
    }
  },
  components: {
    CourseCard
  },
  mounted () {
    this.init()
  },
  methods: {
    // 跳转到查看成绩页面
    goPageGrade () {
      this.$router.push('/score')
    },
    // 初始化获取信息接口
    async init () {
      const gradeSubject = await this.getGradeSubjectList()
      this.courseList = gradeSubject.list
      this.isStudy = gradeSubject.is_study
    },
    // 获取指定学期的学科列表
    getGradeSubjectList () {
      return this.$http.post('/subject/grade_subject_list', {
        major_id: this.$store.state.studentInfo.major_detail.major_id,
        grade: this.$store.state.studentInfo.grade,
        stage: this.stage,
      }).then(res => {
        return res || {}
      })
    }
  },
  watch: {
    stage: {
      handler() {
        this.init()
      },
    }
  }
}
</script>

<style lang="less" scoped>
  .index {
    .index_header {
      background-color: #65AC36;
    }

    .index_header_cont {
      height: 160px;
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 16px;

      .user_major, .user_number {
        margin-top: 8px;
        font-size: 14px;
      }

      .user_number {
        span {
          margin-left: 10px;
        }
      }

      .user_info_cont {
        flex: 0 0 50%;
        display: flex;
        align-items: center;

        .user_img_bg {
          height: 136px;
          width: 136px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, .1);
          margin-right: 22px;

          .user_img_cont {
            width: 112px;
            height: 112px;
            box-sizing: border-box;
            padding: 6px;
            background-color: rgba(255, 255, 255, .4);
            border-radius: 50%;

            .user_img {
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 50%;
            }
          }
        }

        .user_info {
          line-height: 30px;
          .icon_boy{
            vertical-align: middle;
            display: inline-block;
            margin-left: 10px;
            width:17px;
            height:17px;
            background: url('/static/images/study_gender_boy.png') center center no-repeat;
          }
          .icon_girl{
            vertical-align: middle;
            display: inline-block;
            margin-left: 10px;
            width:17px;
            height:17px;
            background: url('/static/images/study_gender_girl.png') center center no-repeat;
          }
        }
      }

      .other_info_cont {
        flex: 1;
        display: flex;

        .school_info {
          line-height: 30px;
          flex: 0 0 50%;
        }

        .see_btn {
          .el-button {
            background-color: transparent !important;
            color: #fff;
            width: 135px;
            height: 30px;
          }
        }
      }
    }

    .index_title {
      height: 74px;
      display: flex;
      align-items: center;
      font-size: 14px;

      .title_bar {
        height: 14px;
        width: 4px;
        background-color: #9DD521;
        margin-left: 17px;
        margin-right: 13px;
      }

      .title_txt {
        color: #222;
        margin-right: 13px;
      }

      .title_number {
        color: #999;
      }
    }

    .course_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .course_item {
        flex: 0 0 279px;
      }
    }
  }
</style>
